<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>异步通信</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!--解决闪现模板问题-->
  <style>
    [v-clock] {
      display: none; /*数据没加载出来之前，让他空白不展示*/
    }
  </style>
</head>
<body>
<div id="app" v-clock>
  <p>{{info.name}}</p>
  <p>{{info.msg}}</p>
  <p>{{info.address[0].street}}</p>
  <!--这样取 虽然取出来了，但是控制台报错（[Vue warn]: Error in render: "TypeError: info.address[0] is undefined"）-->
  <a v-bind:href="info.links[0].url" target="_blank">{{info.links[0].name}}</a>   <!--但是下面这个链接又没报错？？？What~~~！！！-->
</div>
</body>
<!--
    01用最基本的格式，请求并返回了结果，并输出在了控制台。
    现在的问题是 页面怎么取返回的值？
        需要用到data()方法。不是data属性。
    注意：return 的对象，必须要和返回的数据一致，只是返回的模板而已。
-->
<script>
  var vm = new Vue({
    el: "#app",
    // 请求
    mounted() {
      axios.get("data.json").then(response => this.info = response.data) // 控制台已经输出
    },
    // 接收请求返回的结果
    data() {
      return {
        // 这里只是返回结果的模板 值不值的没关系~~~！！！
        info: {
          name: null,
          msg: null,
          address: {
            id: null,
            street: null,
            city: null,
            country: null
          },
          links: {
            name: null,
            url: null
          }
        }
      }
    }
  })
</script>
</html>